<template>
  <!-- 折扣尾票 -->
  <div class="discounts">
    <div class="header">
      <div class="left">
        <div class="title">折扣尾票</div>
        <span>{{ props.disCounts.subTitle }}</span>
        <van-image :src="props.disCounts.subImage" class="shows-discounting"></van-image>
      </div>
      <div class="right" @click="goToCategory('discount')"><van-icon name="arrow" size="20" /></div>
    </div>

    <!-- 标签分类 -->
    <div class="labels">
      <div
        class="label"
        v-for="label in disCountLabels"
        :key="label.showTypeCode"
        :id="label.showTypeCode"
        @click="clickLabel(label.showTypeCode)"
        :class="{ active: currentTypeCode === label.showTypeCode }"
      >
        #{{ label.title }}
      </div>
    </div>

    <div class="list">
      <ul class="discounts-list">
        <li
          class="discounts-list-item"
          v-for="disCount in disCountList"
          :key="disCount.id"
          @click="goToShowDetail(disCount.id)"
        >
          <div class="left">
            <img :src="disCount.imgUrl" class="thumb" />

            <div class="tag">111111</div>
          </div>

          <div class="right">
            <div class="city-title">
              <div class="title">
                <span class="city">{{ disCount.cityName }}</span
                >{{ disCount.title }}
              </div>
            </div>

            <div class="time-venue">
              <div class="time">{{ disCount.showDate }}</div>

              <div class="venue">{{ disCount.venueName }}</div>
            </div>

            <div class="price">
              <div class="discount" :style="{ 'background-color': disCount.discountInfo.color }">
                {{ disCount.discountInfo.num }}{{ disCount.discountInfo.suffix }}
              </div>

              <div class="starting-price">
                ￥
                <span>{{ disCount.priceInfo.yuanNum }}.{{ disCount.priceInfo.centNum }}</span>
                {{ disCount.priceInfo.suffix }}
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

/* prop */

const props = defineProps({
  disCounts: Array,
})

/*  变量 属性 */

// 某类型折扣尾票
const disCountList = ref([])

//初始化折扣类型编号
const currentTypeCode = ref(0)

//寻找默认折扣类型typeCode
currentTypeCode.value = props.disCounts.rooms.find(
  (disCountItem) => disCountItem.title === '全部类型',
).showTypeCode

/* 计算属性 */

// 折扣尾票labels
const disCountLabels = computed(() => {
  return props.disCounts.rooms.map((disCountItem) => {
    return { title: disCountItem.title, showTypeCode: disCountItem.showTypeCode }
  })
})

/* 生命周期 */
onMounted(async () => {
  await clickLabel(currentTypeCode.value)
})

/* 方法  */

// 折扣分类
const goToCategory = (type) => {
  router.push({ path: '/category', query: { sorting: type, showTypeName: 'All' } })
}

//选择折扣票类型
const clickLabel = (labelCode) => {
  //根据传入的code，获取对应的折扣票数据

  disCountList.value = props.disCounts.rooms.find(
    (disCountItem) => disCountItem.showTypeCode === labelCode,
  ).items

  // 高亮对应的label
  currentTypeCode.value = labelCode
}

//折扣尾票演出详情
const goToShowDetail = (id) => {
  router.push({ path: '/show-detail', query: { showId: id } })
}
</script>

<style scoped lang="scss">
.discounts {
  margin-top: 50px;
  padding: 0 15px;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    color: #000;
    font-weight: 600;

    .left {
      display: flex;
      align-items: center;

      .title {
        margin-right: 10px;
      }

      span {
        color: #ff1d41;
        font-weight: 700;
        font-style: italic;
      }

      .shows-discounting {
        width: 120px;
      }
    }
  }

  .labels {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 0;
    gap: 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
      /* Chrome Safari */
    }

    .label {
      flex: 0 0 auto;
      border-radius: 30px;
      margin-right: 15px;
      color: #323038;
      font-size: 14px;
      font-weight: 500;
      background: #f5f5f5;
      white-space: nowrap;
      padding: 5px 10px;
    }

    .label.active {
      color: #ff1d41;
    }
  }

  .list {
    ul.discounts-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 30px;
      margin-top: 20px;

      li.discounts-list-item {
        display: flex;
        gap: 20px;
        align-items: center;
        justify-content: flex-start;

        .left {
          position: relative;
          font-size: 0;

          .thumb {
            width: 100px;
            height: 150px;
            border-radius: 10px;
          }

          .tag {
            position: absolute;
            left: 5px;
            bottom: 5px;
            font-size: 12px;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            padding: 1px 2px;
            border-radius: 4px;
          }
        }

        .right {
          height: 150px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;

          .city-title {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;

            .title {
              font-size: 16px;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              word-wrap: break-word;
              word-break: break-word;

              .city {
                font-size: 12px;
                border: 1px solid #ccc;
                margin-right: 5px;
                padding: 2px;
              }
            }
          }

          .time-venue {
            .time {
              font-size: 12px;
              font-weight: 500;
              margin-bottom: 10px;
            }

            .venue {
              font-size: 12px;
              font-weight: 500;
            }
          }

          .price {
            display: flex;

            .discount {
              margin-right: 10px;
              color: #fff;
              padding: 2px 4px;
              font-size: 12px;
              font-weight: 700;
              border-radius: 4px;
            }

            .starting-price {
              color: #ff1d41;
              font-size: 10px;
              font-weight: 400;

              span {
                font-size: 18px;
                font-weight: 700;
              }
            }
          }
        }
      }
    }
  }
}
</style>
